<template>
  <el-dialog title="版本详情" :model-value="visible" width="900px" append-to-body @close="handleClose">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="版本ID">{{ detailData.versionId }}</el-descriptions-item>
      <el-descriptions-item label="版本名称">{{ detailData.versionName }}</el-descriptions-item>
      <el-descriptions-item label="版本号">{{ detailData.versionNumber }}</el-descriptions-item>
      <el-descriptions-item label="设备类型">
        <el-tag :type="getDeviceTypeTagType(detailData.deviceType)">{{ getDeviceTypeText(detailData.deviceType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="文件大小">{{ formatFileSize(detailData.fileSize) }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusTagType(detailData.versionStatus)">{{ getStatusText(detailData.versionStatus) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="升级设备数">{{ detailData.upgradeCount }}</el-descriptions-item>
      <el-descriptions-item label="成功率">{{ detailData.successRate }}%</el-descriptions-item>
      <el-descriptions-item label="是否强制升级">
        <el-tag :type="detailData.forceUpgrade ? 'danger' : 'info'">
          {{ detailData.forceUpgrade ? '是' : '否' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="升级超时时间">{{ detailData.upgradeTimeout }}秒</el-descriptions-item>
      <el-descriptions-item label="发布人">{{ detailData.publisher }}</el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ detailData.releaseTime }}</el-descriptions-item>
      <el-descriptions-item label="版本描述" :span="2">{{ detailData.description }}</el-descriptions-item>
      <el-descriptions-item label="更新日志" :span="2">
        <div class="changelog-content">{{ detailData.changelog }}</div>
      </el-descriptions-item>
    </el-descriptions>
    
    <el-divider>升级统计</el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="upgrade-stat">
          <div class="stat-number">{{ upgradeStats.total }}</div>
          <div class="stat-label">总设备数</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="upgrade-stat success">
          <div class="stat-number">{{ upgradeStats.success }}</div>
          <div class="stat-label">升级成功</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="upgrade-stat failed">
          <div class="stat-number">{{ upgradeStats.failed }}</div>
          <div class="stat-label">升级失败</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="upgrade-stat pending">
          <div class="stat-number">{{ upgradeStats.pending }}</div>
          <div class="stat-label">待升级</div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup name="VersionDetailDialog" lang="ts">
import { reactive } from 'vue'

// Props
interface Props {
  visible: boolean
  detailData: any
  upgradeStats: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  detailData: () => ({}),
  upgradeStats: () => ({
    total: 0,
    success: 0,
    failed: 0,
    pending: 0
  })
})

// Emits
const emit = defineEmits(['update:visible'])

// 获取设备类型标签类型
const getDeviceTypeTagType = (type: string) => {
  const typeMap = {
    sensor: 'primary',
    controller: 'success',
    gateway: 'warning',
    camera: 'info'
  }
  return typeMap[type] || 'info'
}

// 获取设备类型文本
const getDeviceTypeText = (type: string) => {
  const typeMap = {
    sensor: '传感器',
    controller: '控制器',
    gateway: '网关',
    camera: '摄像头'
  }
  return typeMap[type] || type
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const statusMap = {
    developing: 'info',
    testing: 'warning',
    released: 'success',
    deprecated: 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap = {
    developing: '开发中',
    testing: '测试中',
    released: '已发布',
    deprecated: '已下线'
  }
  return statusMap[status] || status
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.changelog-content {
  white-space: pre-line;
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
}

.upgrade-stat {
  text-align: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f5f7fa;
}

.upgrade-stat.success {
  background-color: #f0f9ff;
  border: 1px solid #67c23a;
}

.upgrade-stat.failed {
  background-color: #fef0f0;
  border: 1px solid #f56c6c;
}

.upgrade-stat.pending {
  background-color: #fdf6ec;
  border: 1px solid #e6a23c;
}

.upgrade-stat .stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.upgrade-stat.success .stat-number {
  color: #67c23a;
}

.upgrade-stat.failed .stat-number {
  color: #f56c6c;
}

.upgrade-stat.pending .stat-number {
  color: #e6a23c;
}

.upgrade-stat .stat-label {
  font-size: 12px;
  color: #909399;
}
</style>